<template>
    <div>
        <el-card style="" body-style="padding:15px;padding-top:10px;">
            <div class="sheet-title" style="margin-bottom: 35px">
                <slot name="title"></slot>
            </div>
            <el-form :inline=true label-width="100%" size="mini">
                <slot name="tool"></slot>
                <el-form-item v-if="hasQueryConditions==true">
                    <btn-collapse-basic :isShow.sync="showSearch"></btn-collapse-basic>
                </el-form-item>
            </el-form>
            <el-collapse-transition v-if="hasQueryConditions==true">
                <div v-show="showSearch">
                    <div class="transition-box">
                        <el-form label-width="80px" :inline="true" size="mini" style="display: flex; flex-wrap: wrap;">
                            <slot name="queryCondition"></slot>
                        </el-form>
                    </div>
                </div>
            </el-collapse-transition>
            <slot name="body"></slot>
            <slot></slot>
        </el-card>
    </div>
</template>
<script>
    import BtnCollapseBasic from './btn-collapse-basic'

    export default {
        name: "base-list-layout",
        components: {BtnCollapseBasic},
        props: {
            /* 页面是否需要有高级查询条件 */
            hasQueryConditions: {
                type: Boolean,
                default: true
            }
        },
        data() {
            return {
                showSearch: false
            }
        }
    }
</script>
<style scoped>

</style>